<template>
  <div>
    <f-header></f-header>
    <el-row
      class="main"
      type="flex"
      justify="center"
      style="margin:20px 0 20px 0;"
    >
      <el-col :span="12">
        <div id="artcle-info">
          <el-card>
            <h3>
              {{ post.title }}
              <el-tag size="mini">{{ post.description }}</el-tag>
            </h3>
            <el-row class="art-info">
              <div class="message" id="box">
                <ul class="msg-ul">
                  <li class="msg">
                    <div>
                      <img class="picture" :src="post.user.avatar" />
                      <i style="line-height:30px">{{ post.user.username }}</i>
                    </div>
                  </li>
                  <li class="msg">
                    <span class="el-icon-time">{{ post.createTime }}</span>
                  </li>
                  <li class="msg">
                    <i class="el-icon-view">{{ post.views }}</i>
                  </li>
                  <li class="msg" @click="clickLike()">
                    <i class="el-icon-s-opportunity">{{ post.likes }}</i>
                  </li>

                  <li class="msg">
                    <span
                      @click="dialogSelectVisible = true"
                      class="report el-icon-warning"
                      >举报</span
                    >
                  </li>
                  <el-dialog
                    title="举报原因"
                    :visible.sync="dialogSelectVisible"
                  >
                    <el-select
                      v-model="reason"
                      placeholder="请选择"
                      @change="selectReason"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    <el-button
                      @click="dialogSelectVisible = false"
                      style="margin-left:10px"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="
                        dialogSelectVisible = false;
                        commitReport();
                      "
                      >确 定</el-button
                    >
                  </el-dialog>
                  <li class="msg">
                    <span class="el-icon-star-on" @click="collectTip"
                      >收藏</span
                    >
                  </li>

                  <li class="msg" style="margin-left:5px;">
                    <el-button
                      type="danger"
                      round
                      size="small"
                      @click="toFocus()"
                      >关注</el-button
                    >
                  </li>
                </ul>
              </div>
            </el-row>
          </el-card>
        </div>

        <!--文章详情-->
        <div class="blog-post-body">
          <mavon-editor
            v-model="post.content"
            :subfield="false"
            :ishljs="true"
            @change="change"
            defaultOpen="preview"
            :toolbarsFlag="false"
            previewBackground="#FFF"
          />
        </div>

        <!--帖子评论 -->
        <div id="artcle-comment">
          <el-card>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="comment"
              maxlength="100"
              show-word-limit
              class="e-input"
            ></el-input>
            <el-button type="primary" plain @click="toComment()"
              >评论</el-button
            >
            <el-divider></el-divider>
            <el-row class="art-info">
              <div class="com" id="box">
                <ul class="msg-ul1">
                  <el-divider></el-divider>

                  <li
                    class="msg1"
                    v-for="item in commentList"
                    v-bind:key="item"
                  >
                    <img class="picture" :src="item.user.avatar" />
                    <span style="line-height:30px；margin-left:10px;"
                      >{{ item.user.username }}:</span
                    >
                    <span style="margin-left:10px;">{{ item.comment }}</span>
                    <span style="color:#aaa;margin-left:10px;">{{
                      item.createTime
                    }}</span>
                    <span
                      class="el-icon-s-opportunity"
                      @click="LikeComment(item.id)"
                      >{{ item.likes }}</span
                    >
                  </li>

                  <li class="msg1 page">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="total"
                      :page-size="pageSize"
                      :current-page="currentPage"
                      @current-change="GetCommentList"
                    ></el-pagination>
                  </li>
                </ul>
              </div>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <!-- 返回顶部 -->
      <el-backtop bottom="350"></el-backtop>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      text: "",

      post: {},
      commentList: [],
      options: [
        {
          value: "1",
          label: "色情",
        },
        {
          value: "2",
          label: "暴力",
        },
        {
          value: "3",
          label: "歧视",
        },
        {
          value: "4",
          label: "不符合版规",
        },
        {
          value: "5",
          label: "其他",
        },
      ],
      reason: "色情",
      dialogSelectVisible: false,
      comment: "",
      commentPush: {},
      focusList: {},
      collectList: {},
      reportList: {},
    };
  },
  created() {
    this.postsView();
    this.GetCommentList(1);
  },
  methods: {
    // 举报原因
    selectReason(value) {
      // alert(value);
      const option = this.options.find((item) => {
        return item.value === value;
      });
      console.log(option.label);
      this.reportList.reason = option.label;
    },

    //发布评论
    toComment() {
      const _this = this;
      this.commentPush.comment = this.comment;
      console.log(this.commentPush.comment);
      if (this.$store.state.userInfo === null) {
        this.$message.error("请先登录！");
        return;
      }
      if (this.commentPush.comment === "") {
        this.$message.error("请输入评论信息");
        return;
      }
      this.commentPush.postId = this.$route.params.postsId;
      this.commentPush.userId = this.$store.state.userInfo.id;
      console.log(this.commentPush);
      this.$axios({
        url: "/forum/comment/commented",
        method: "post",
        data: this.commentPush,
      }).then((res) => {
        console.log(res);
        this.$message.success("评论成功");
        this.GetCommentList(1);
      });
    },

    //关注up
    toFocus() {
      const _this = this;
      console.log(this.focusList);
      if (this.$store.state.userInfo === null) {
        this.$message.error("请先登录");
        return;
      }
      this.$axios({
        url: "/forum/focus/focusById",
        method: "post",
        data: this.focusList,
      }).then((res) => {
        console.log(res);
        this.$message.success("关注成功");
        // this.GetCommentList(1);
      });
    },

    //收藏帖子
    collectTip() {
      const h = this.$createElement;

      if (this.$store.state.userInfo === null) {
        this.$message.error("请先登录");
        return;
      }
      this.collectList.postId = this.$route.params.postsId;
      this.collectList.userId = this.$store.state.userInfo.id;
      console.log(this.collectList);
      this.$axios({
        url: "/forum/collection/save",
        method: "post",
        data: this.collectList,
      }).then((res) => {
        console.log(res);
        this.$notify({
          title: "收藏",
          message: h("i", { style: "color: teal" }, "收藏成功！"),
        });
      });
    },

    //举报帖子
    commitReport() {
      const h = this.$createElement;
      const _this = this;

      if (this.$store.state.userInfo === null) {
        this.$message.error("请先登录");
        return;
      }
      this.reportList.reason = this.reason;
      this.reportList.postId = this.$route.params.postsId;
      this.reportList.userId = this.$store.state.userInfo.id;
      console.log(this.reportList);
      this.$axios({
        url: "/forum/report/reported",
        method: "post",
        data: this.reportList,
      }).then((res) => {
        console.log(res);
        this.$notify({
          title: "提示",
          message: h("i", { style: "color: teal" }, "举报已提交，待审核。"),
        });
      });
    },

    // 给当前帖子点赞
    clickLike() {
      const h = this.$createElement;

      this.$axios({
        url:
          "/forum/posts/LikedPost?postId=" +
          this.$route.params.postsId +
          "&userId=" +
          this.$store.state.userInfo.id,
        method: "post",
      }).then((res) => {
        console.log(res);
        this.$notify({
          title: "提示",
          type: "success",
          message: h("i", { style: "color: teal" }, res.data.msg),
        });
        if (res.data.msg === "点赞成功") {
          this.post.likes += 1;
        } else {
          this.post.likes -= 1;
        }
      });
    },

    //给评论点赞
    LikeComment(id) {
      const _this = this;
      const userId = this.$store.getters.getUser.id;
      this.$axios
        .post("/forum/comment/liked?id=" + id + "&userId=" + userId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.GetCommentList(1);
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
    //获取评论列表
    GetCommentList(currentPage) {
      const postId = this.$route.params.postsId;
      const _this = this;
      this.$axios
        .post(
          "/forum/comment/list?currentPage=" + currentPage + "&postId=" + postId
        )
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            _this.commentList = res.data.data.records;
            _this.currentPage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;
            // this.$message({
            //   message: res.data.msg,
            //   type: "success",
            // });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
    //获取文章内容
    postsView() {
      const postsId = this.$route.params.postsId;
      const _this = this;
      this.$axios
        .post("/forum/posts/getPostById?postsId=" + postsId)
        .then((res) => {
          if (res.data.code === 200) {
            _this.post = res.data.data;
            _this.focusList.upId = res.data.data.userId;
            _this.focusList.userId = this.$store.state.userInfo.id;
            console.log(_this.post);
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}
#box * {
  vertical-align: middle;
}

#artcle-info {
  margin-bottom: 5px;
}
#artcle-comment {
  margin-top: 20px;
}
#side .item {
  margin-bottom: 30px;
}
.el-icon-s-opportunity {
  float: right;
  line-height: 30px;
}
.el-icon-s-opportunity:hover {
  color: red;
  cursor: pointer;
}

.el-icon-star-on:hover {
  cursor: pointer;
  color: red;
}
.report:hover {
  color: #409eff;
  cursor: pointer;
}
.el-tag {
  margin-left: 5px;
  vertical-align: middle;
}
.el-card {
  text-align: left;
}
.picture {
  width: 30px;
  height: 30px;
  margin-left: 0px;
  margin-right: 5px;
  border-radius: 50%;
  transition: 1s;
  &:hover {
    transform: scale(1.2);
  }
}
.message {
  text-align: left;
  line-height: 30px;
  color: #aaa;
}
.com {
  text-align: left;
  line-height: 30px;
  width: 100vh;
}
.msg-ul {
  margin: 0px;
}

.msg {
  float: left;
  list-style: none;
  margin-right: 30px;
}
.msg1 {
  list-style: none;
  margin-bottom: 30px;
}
.page {
  text-align: center;
}
.e-input {
  margin-bottom: 10px;
}
h3,
h4 {
  margin: 0px 10px 10px 0px;
}
.art-title {
  padding: 5px;
  cursor: pointer;
}
.art-title:hover {
  padding-left: 10px;
  color: #ff4040;
}
.art-info {
  display: flex;
  padding: 10px 0;
}

.list-item {
  list-style: none;
  text-align: left;
}
</style>
